<h3>Overlays</h3>

An overlay is a popup within the page. Technically, it is not part of the w2popup object. It is part of w2utils. However, it is described here
due to its functional similarity to popups. Tags and overlays are common purpose jQuery plugins and should be called in jQuery plugin syntax.
<div style="height: 20px"></div>

<h4>$().w2tag(html, [options])</h4>
The plugin will display a tag on the right from specified element.

<textarea class="html">
<input id="input-tag">
&lt;script>
    $("#input-tag").w2tag('Automatic tag. It can hold any HTML and be quite long', {
        auto: true,
        maxWidth: 200,
        position: 'top|bottom',
        className: 'w2ui-light'
    })
&lt;/script>
</textarea>

<h5>Preview</h5>

<input id="input-tag">
<script>
    $("#input-tag").w2tag('Automatic tag. It can hold any HTML and be quite long', {
        auto: true,
        maxWidth: 200,
        position: 'top|bottom',
        className: 'w2ui-light'
    })
</script>

<div class="spacer5"></div>
<i>Hover over this field</i>
<div style="height: 30px"></div>

There can be many tags on the screen at the same time. If the element is moved, the tag will move with it. If it is destroyed, the tag will be destroyed. If you need to hide a tag, call w2tag again with empty text.
<div style="height: 10px"></div>

Options can be one of the following:
<textarea class="javascript">
options: {
    id              : null,     // id for the tag, otherwise input id is used
    auto            : null,     // if  true, then tag will show on mouseEnter and hide on mouseLeave
    html            : text,     // or html
    position        : 'right',  // can be left, right, top, bottom
    align           : 'none',   // can be none, left, right (only works for position: top | bottom)
    left            : 0,        // delta for left coordinate
    top             : 0,        // delta for top coordinate
    maxWidth        : null,     // max width to grow
    style           : '',       // addition style for the tag
    css             : {},       // add css for input when tag is shown
    className       : '',       // add class bubble - 'w2ui-light' for light color tag
    inputClass      : '',       // add class for input when tag is shown
    hideOnKeyPress  : true,     // hide tag if key pressed
    hideOnFocus     : false,    // hide tag on focus
    hideOnBlur      : false,    // hide tag on blur
    hideOnClick     : false,    // hide tag on document click
    hideOnChange    : true,     // hide if input changed
    showOn     : 'mouseeneter', // show tag on
    hideOn     : 'mouseleave',  // hide tag on
    onShow     : null,          // callBack when shown
    onHide     : null           // callBack when hidden
}
</textarea>
<div style="height: 20px"></div>

<h4>$().w2overlay(options)</h4>
The plugin will display an overlay under (or above) the element. If element is by the edge of the screen, the overlay will be
displayed in the visible portion of the page.

<textarea class="javascript">
let html = `
    <div style="padding: 10px; line-height: 1.5">
        This is an overlay.<br>Can be multi line HTML.
    </div>`
$('#input-overlay').w2overlay({ html, align: 'both' })
</textarea>

<h5>Preview</h5>

<input id="input-overlay"
    onclick="let html =`<div style=\'padding: 10px; line-height: 1.5\'>This is an overlay.<br>Can be multi line HTML.</div>`; $(this).w2overlay({ html, align: 'both' })">
<div style="height: 10px"></div>

<i>Click on this field</i>
<div style="height: 30px"></div>

If first argument is a string, it will be treated as HTML to display. However, the first argument can be an object with options.
If user clicks anywhere else on the screen the overlay will be hidden, which is not the same with tags. Normally, you can have
only one overlay on the screen, however, you can provide a unique name if you want to display multiple overlays at the same time.
Overlay supports following options:
<textarea class="javascript">
options: {
    name          : null,      // it not null, then allows multiple concurrent overlays
    html          : '',        // html text to display
    align         : 'none',    // can be none, left, right, both
    left          : 0,         // offset left
    top           : 0,         // offset top
    tipLeft       : 30,        // tip offset left
    noTip         : false,     // if true - no tip will be displayed
    selectable    : false,     // if text is selectable inside the overlay
    width         : 0,         // fixed width
    height        : 0,         // fixed height
    maxWidth      : null,      // max width if any
    maxHeight     : null,      // max height if any
    contextMenu   : false,     // if true, it will be opened at mouse position
    pageX         : null,      // pageX from event.pageX object (for contextMenu)
    pageY         : null,      // pageY from event.pageY object (for contextMenu)
    originalEvent : null,      // original event (instead of pageX and pageY)
    style         : '',        // additional style for main div
    class         : '',        // additional class name for main div
    overlayStyle  : '',        // css style of entire overlay
    onShow        : null,      // event on show
    onHide        : null,      // event on hide
    openAbove     : false,     // show above control
    tmp           : {}
}
</textarea>
<div style="height: 20px"></div>

<h4>$().w2menu(menu, options)</h4>
Displays popup menu
For example:

<textarea class="javascript">
$('#id').w2menu({
    items: [
        { id: 1, text: 'Item 1', icon: 'icon-page' },
        { id: 2, text: 'Item 2', icon: 'icon-page' },
        { id: 3, text: 'Item 3', icon: 'icon-page' },
    ],
    align: 'both',
    onSelect(event) {
        $('#input-menu').val(event.item.text)
    }
})
</textarea>

<h5>Preview</h5>
<input id="input-menu" onclick="
    $(this).w2menu({
        items: [
            { id: 1, text: 'Item 1', icon: 'icon-page' },
            { id: 2, text: 'Item 2', icon: 'icon-page' },
            { id: 3, text: 'Item 3', icon: 'icon-page' },
        ],
        align: 'both',
        onSelect(event) {
            $('#input-menu').val(event.item.text)
        }
    })">

<i>Click on this field</i>
<div style="height: 20px"></div>

You can use any valid overlay option for the w2memnu as well. In addition it has following options:
<textarea class="javascript">
{
    type         : 'normal',    // can be normal, radio, check
    index        : null,        // current selected
    items        : [],          // menu items
    render       : null,        // custom renderer
    msgNoItems   : 'No items found',
    hideOnSelect : true,        // hide menu when item selected
    hideOnRemove : false,       // hide menu if item removed
    onSelect     : null,        // select event
    onRemove     : null         // remove event
}
</textarea>
Items is an array of objects
<textarea class="javascript">
item: {
    id       : null,
    text     : '',
    style    : '',
    img      : '',
    icon     : '',
    count    : '',
    tooltip  : '',
    hidden   : false,
    checked  : null,
    disabled : false
    ...
}
</textarea>

<h4>$().w2color(options, callBack)</h4>
Displays color picker menu for the element. It is used in w2toolbar for color and text-color menus.
For example:

<textarea class="javascript">
$('#id').w2color({
    color: $(this).val(),
    transparent: true,
    html: 'Custom Colors',
    onSelect(color) {
        $('#input-color')
            .val(color)
            .w2overlay() // hide
    }
})
</textarea>

<h5>Preview</h5>
<input id="input-color" size="10" onclick="
    $(this).w2color({
        color: $(this).val(),
        transparent: true,
        html: 'Custom Colors',
        onSelect(color) {
            $('#input-color')
                .val(color)
                .w2overlay() // hide
        }
    })">

<i>Click on this field</i>
<div style="height: 20px"></div>

You can use any valid overlay option for the color as well. In addition it has following options:
<textarea class="javascript">
options: {
    color: '#000000',    // default color to display
    transparent: true,   // boolean, if true will show transparent color selection
    html: '',            // additional HTML at the bottom of dialog
    onSelect: function,  // func, called when color is selected
}
</textarea>